import React, { Component } from "react";
import {
    Icon, Table, Button, Form, Input, DatePicker, Select, Skeleton, Col, Row, Alert, Collapse, message, Drawer, 
    AutoComplete, Modal, Card, Tabs, List 
} from "antd";
import moment from 'moment';
import RViewerJS from 'viewerjs-react';
import {
    getSchoolLevelByCenterEduIdApi, getSchoolPatrolNumRankApi, getSchoolInspectNumRankApi, getSchoolInspectRatesRankApi, 
    getSchoolInspectPointsRankApi, getSchoolPatrolRatesRankApi, getSchoolPatrolPointsRankApi, getSchoolComprehensivePointsRankApi, 
    getSchoolDangerDealPointsRankApi, getSchoolDangerNumRankApi
} from "../js/edudailystatistics.js";
import { safetysceneDetailByIdApi, allInspectItemCategory, getExistCategoryBySchoolIdAip, allUserApi, getSafetySceneSearchApi, getSafetySceneSearchChartDataApi } from "../js/api.js";

import { UrlPrefix, iconFontUrl } from "../js/config.js";


import * as echarts from 'echarts'
import '../css/bigscreen.css'
import { ConsoleSqlOutlined } from "@ant-design/icons";
import { exportExcel } from "../js/utils.js";

const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;
const TabPane = Tabs.TabPane;

const IconFont = Icon.createFromIconfontCN({
    scriptUrl: iconFontUrl,
});

const dateFormat = 'YYYY-MM-DD';

const statisticTypeList = [{
    key: 0,
    type: "巡检次数",
    alias: "inspectnum"
}, {
    key: 1,
    type: "巡检完成率",
    alias: "inspectrates"
}
, {
    key: 2,
    type: "巡检积分",
    alias: "inspectpoints"
}, {
    key: 3,
    type: "巡更次数",
    alias: "patrolnum"
}, {
    key: 4,
    type: "巡更完成率",
    alias: "patrolrates"
}, {
    key: 5,
    type: "巡更积分",
    alias: "patrolpoints"
}, {
    key: 6,
    type: "隐患次数",
    alias: "dangernum"
}, {
    key: 7,
    type: "隐患积分",
    alias: "dangerdealpoints"
}, {
    key: 8,
    type: "综合积分",
    alias: "comprehensivepoints"
}]

class schoolStatistic extends Component {
    constructor(props) {
        super(props);
        this.state = {
            alertVisible: false, //提示
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            tableLoading: true,
            filteredInfo: null,
            sortedInfo: null,
            tableData: [],
            schoolLevel: [],
            searchChartLoading: true,
            chartSearchData: {},
            startTime: "",
            endTime: "",
            isSearch: false,
            statisticType: "",
            statisticData: "",
            chartAvg: ""
        };
    }
    componentDidMount() {
        this.refreshData();
    }
    getBeforeDayTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000;
        var beforeday = new Date(time); // 获取的是前一天日期

        beforeday = beforeday.getFullYear() + "-" + (beforeday.getMonth() + 1 > 9
            ? (beforeday.getMonth() + 1) : "0" + (beforeday.getMonth()+1)) + "-" + (beforeday.getDate() > 9
                ? (beforeday.getDate()) : "0" + (beforeday.getDate())); //字符串拼接转格式：例如2018-08-19
        
        return beforeday
    }
    getBeforeWeekTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000 * 7;
        var beforeweek = new Date(time); // 获取的是前一周日期

        beforeweek = beforeweek.getFullYear() + "-" + (beforeweek.getMonth() + 1 > 9
            ? (beforeweek.getMonth() + 1) : "0" + (beforeweek.getMonth() + 1)) + "-" + (beforeweek.getDate() > 9
                ? (beforeweek.getDate()) : "0" + (beforeweek.getDate())); //字符串拼接转格式：例如2018-08-19
        return beforeweek
    }

    refreshData() {
        this.setState({
            tableLoading: true,
            statisticType: "巡检次数",
            statisticData: "inspectnum",
        });
        let educationId = parseInt(sessionStorage.getItem("departmentId"))
        let schooltype;
        var startTime = this.getBeforeWeekTime()
        var endTime = this.getBeforeDayTime()
        
        this.getSchoolLevelByCenterEduId(educationId)
        this.getSchoolInspectNumRank(educationId, schooltype, startTime, endTime)
    }

    searchSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            this.setState({
                statisticType: statisticTypeList[values.statisticType].type,
                statisticData: statisticTypeList[values.statisticType].alias,
            })
            let educationId = parseInt(sessionStorage.getItem("departmentId"))
            let schooltype = values.schoolLevel;
            switch(values.statisticType){
                case 0 : this.getSchoolInspectNumRank(educationId, schooltype, this.state.startTime, this.state.endTime)
                break;
                case 1 : this.getSchoolInspectRatesRank(educationId, schooltype, this.state.startTime, this.state.endTime)
                break;
                case 2 : this.getSchoolInspectPointsRank(educationId, schooltype, this.state.startTime, this.state.endTime)
                break;
                case 3 : this.getSchoolPatrolNumRank(educationId, schooltype, this.state.startTime, this.state.endTime) 
                break;
                case 4 : this.getSchoolPatrolRatesRank(educationId, schooltype, this.state.startTime, this.state.endTime) 
                break;
                case 5 : this.getSchoolPatrolPointsRank(educationId, schooltype, this.state.startTime, this.state.endTime) 
                break;
                case 6 : this.getSchoolDangerNumRank(educationId, schooltype, this.state.startTime, this.state.endTime) 
                break;
                case 7 : this.getSchoolDangerPointsRank(educationId, schooltype, this.state.startTime, this.state.endTime) 
                break;
                case 8 : this.getSchoolComprehensivePointsRank(educationId, schooltype, this.state.startTime, this.state.endTime) 
                break;
            }
        })
    }

    clearAll = () => {
        this.setState({
            filteredInfo: null,
            sortedInfo: null,
        });
    }

    handleChange = (pagination, filters, sorter) => {
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }

    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
    }

    handleSearchReset = clearFilters => () => {
        clearFilters();
    }

    onRef = (ref) => {
        this.child = ref
    }

    searchReset = () => {
        this.props.form.resetFields();
    }

    // 巡检次数
    getSchoolInspectNumRank = (educationId, schooltype, startTime, endTime) => {
        getSchoolInspectNumRankApi(educationId, schooltype, startTime, endTime).then((res) => {
            if(res.data.schoolinspectnumrankList.length != 0){
                let tableData = [];
                let schoolName = [];
                let schoolResult = [];
                let serialList = [];
                res.data.schoolinspectnumrankList.forEach((item, index) => {
                    tableData.push({
                        key: index + 1,
                        schoolName: item.schoolName,
                        inspectnum: item.inspectnum
                    })
                    schoolName.push(item.schoolName);
                    schoolResult.push(item.inspectnum);
                    serialList.push(index + 1);
                    
                })
                console.log("=========", schoolResult)
                this.setState({
                    tableData: tableData,
                    searchChartLoading: false,
                    tableLoading: false,
                    alertVisible: false,
                    isSearch: true,
                    startTime: startTime,
                    endTime: endTime,
                    schoolName: schoolName,
                    schoolResult: schoolResult,
                    serialList: serialList,
                    chartAvg: res.data.schoolinspectnumavg
                })
            }
        }).catch((e) => {
            if (e.response) {
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                console.info(e.request)
            } else {
                console.info('error', e.message)
            }
            console.info(e.config)
        });
    }

    // 巡检完成率
    getSchoolInspectRatesRank = (educationId, schooltype, startTime, endTime) => {
        getSchoolInspectRatesRankApi(educationId, schooltype, startTime, endTime).then((res) => {
            if(res.data.schoolinspectratesrankList.length != 0){
                let tableData = [];
                let schoolName = [];
                let schoolResult = [];
                let serialList = [];
                res.data.schoolinspectratesrankList.forEach((item, index) => {
                    tableData.push({
                        key: index + 1,
                        schoolName: item.schoolName,
                        inspectrates: item.inspectrates
                    })
                    schoolName.push(item.schoolName);
                    schoolResult.push(item.inspectrates);
                    serialList.push(index + 1);
                    
                })
                console.log("=========", schoolResult)
                this.setState({
                    tableData: tableData,
                    searchChartLoading: false,
                    tableLoading: false,
                    alertVisible: false,
                    isSearch: true,
                    startTime: startTime,
                    endTime: endTime,
                    schoolName: schoolName,
                    schoolResult: schoolResult,
                    serialList: serialList,
                    chartAvg: res.data.schoolinspectratesavg
                })
            }
        }).catch((e) => {
            if (e.response) {
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                console.info(e.request)
            } else {
                console.info('error', e.message)
            }
            console.info(e.config)
        });
    }
    
    // 巡检积分
    getSchoolInspectPointsRank = (educationId, schooltype, startTime, endTime) => {
        getSchoolInspectPointsRankApi(educationId, schooltype, startTime, endTime).then((res) => {
            if(res.data.schoolinspectpointsrankList.length != 0){
                let tableData = [];
                let schoolName = [];
                let schoolResult = [];
                let serialList = [];
                res.data.schoolinspectpointsrankList.forEach((item, index) => {
                    tableData.push({
                        key: index + 1,
                        schoolName: item.schoolName,
                        inspectpoints: item.inspectpoints
                    })
                    schoolName.push(item.schoolName);
                    schoolResult.push(item.inspectpoints);
                    serialList.push(index + 1);
                    
                })
                console.log("=========", schoolResult)
                this.setState({
                    tableData: tableData,
                    searchChartLoading: false,
                    tableLoading: false,
                    alertVisible: false,
                    isSearch: true,
                    startTime: startTime,
                    endTime: endTime,
                    schoolName: schoolName,
                    schoolResult: schoolResult,
                    serialList: serialList,
                    chartAvg: res.data.schoolinspectpointsavg
                })
            }
        }).catch((e) => {
            if (e.response) {
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                console.info(e.request)
            } else {
                console.info('error', e.message)
            }
            console.info(e.config)
        });
    }

    // 巡更次数
    getSchoolPatrolNumRank = (educationId, schooltype, startTime, endTime) => {
        getSchoolPatrolNumRankApi(educationId, schooltype, startTime, endTime).then((res) => {
            if(res.data.schoolpatrolnumrankList.length != 0){
                let tableData = [];
                let schoolName = [];
                let schoolResult = [];
                let serialList = [];
                res.data.schoolpatrolnumrankList.forEach((item, index) => {
                    tableData.push({
                        key: index + 1,
                        schoolName: item.schoolName,
                        patrolnum: item.patrolnum
                    })
                    schoolName.push(item.schoolName);
                    schoolResult.push(item.patrolnum);
                    serialList.push(index + 1);
                    
                })
                console.log("=========", schoolResult)
                this.setState({
                    tableData: tableData,
                    searchChartLoading: false,
                    tableLoading: false,
                    alertVisible: false,
                    isSearch: true,
                    startTime: startTime,
                    endTime: endTime,
                    schoolName: schoolName,
                    schoolResult: schoolResult,
                    serialList: serialList,
                    chartAvg: res.data.schoolpatrolnumavg
                })
            }
        }).catch((e) => {
            if (e.response) {
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                console.info(e.request)
            } else {
                console.info('error', e.message)
            }
            console.info(e.config)
        });
    }

    // 巡更完成率
    getSchoolPatrolRatesRank = (educationId, schooltype, startTime, endTime) => {
        getSchoolPatrolRatesRankApi(educationId, schooltype, startTime, endTime).then((res) => {
            if(res.data.schoolpatrolratesrankList.length != 0){
                let tableData = [];
                let schoolName = [];
                let schoolResult = [];
                let serialList = [];
                res.data.schoolpatrolratesrankList.forEach((item, index) => {
                    tableData.push({
                        key: index + 1,
                        schoolName: item.schoolName,
                        patrolrates: item.patrolrates
                    })
                    schoolName.push(item.schoolName);
                    schoolResult.push(item.patrolrates);
                    serialList.push(index + 1);
                    
                })
                this.setState({
                    tableData: tableData,
                    searchChartLoading: false,
                    tableLoading: false,
                    alertVisible: false,
                    isSearch: true,
                    startTime: startTime,
                    endTime: endTime,
                    schoolName: schoolName,
                    schoolResult: schoolResult,
                    serialList: serialList,
                    chartAvg: res.data.schoolpatrolratesavg
                })
            }
        }).catch((e) => {
            if (e.response) {
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                console.info(e.request)
            } else {
                console.info('error', e.message)
            }
            console.info(e.config)
        });
    }

    // 巡更积分
    getSchoolPatrolPointsRank = (educationId, schooltype, startTime, endTime) => {
        getSchoolPatrolPointsRankApi(educationId, schooltype, startTime, endTime).then((res) => {
            if(res.data.schoolpatrolpointsrankList.length != 0){
                let tableData = [];
                let schoolName = [];
                let schoolResult = [];
                let serialList = [];
                res.data.schoolpatrolpointsrankList.forEach((item, index) => {
                    tableData.push({
                        key: index + 1,
                        schoolName: item.schoolName,
                        patrolpoints: item.patrolpoints
                    })
                    schoolName.push(item.schoolName);
                    schoolResult.push(item.patrolpoints);
                    serialList.push(index + 1);
                    
                })
                this.setState({
                    tableData: tableData,
                    searchChartLoading: false,
                    tableLoading: false,
                    alertVisible: false,
                    isSearch: true,
                    startTime: startTime,
                    endTime: endTime,
                    schoolName: schoolName,
                    schoolResult: schoolResult,
                    serialList: serialList,
                    chartAvg: res.data.schoolpatrolpointsavg
                })
            }
        }).catch((e) => {
            if (e.response) {
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                console.info(e.request)
            } else {
                console.info('error', e.message)
            }
            console.info(e.config)
        });
    }

    // 隐患次数
    getSchoolDangerNumRank = (educationId, schooltype, startTime, endTime) => {
        getSchoolDangerNumRankApi(educationId, schooltype, startTime, endTime).then((res) => {
            if(res.data.schooldangerdealpointsrankList.length != 0){
                let tableData = [];
                let schoolName = [];
                let schoolResult = [];
                let serialList = [];
                res.data.schooldangerdealpointsrankList.forEach((item, index) => {
                    tableData.push({
                        key: index + 1,
                        schoolName: item.schoolName,
                        dangernum: item.dangernum
                    })
                    schoolName.push(item.schoolName);
                    schoolResult.push(item.dangernum);
                    serialList.push(index + 1);
                    
                })
                this.setState({
                    tableData: tableData,
                    searchChartLoading: false,
                    tableLoading: false,
                    alertVisible: false,
                    isSearch: true,
                    startTime: startTime,
                    endTime: endTime,
                    schoolName: schoolName,
                    schoolResult: schoolResult,
                    serialList: serialList,
                    chartAvg: res.data.schooldangernumavg
                })
            }
        }).catch((e) => {
            if (e.response) {
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                console.info(e.request)
            } else {
                console.info('error', e.message)
            }
            console.info(e.config)
        });
    }

    // 隐患积分
    getSchoolDangerPointsRank = (educationId, schooltype, startTime, endTime) => {
        getSchoolDangerDealPointsRankApi(educationId, schooltype, startTime, endTime).then((res) => {
            if(res.data.schooldangerdealpointsrankList.length != 0){
                let tableData = [];
                let schoolName = [];
                let schoolResult = [];
                let serialList = [];
                res.data.schooldangerdealpointsrankList.forEach((item, index) => {
                    tableData.push({
                        key: index + 1,
                        departmentId: item.id, 
                        schoolName: item.schoolName,
                        dangernum: item.dangernum,
                        dangerdealnum: item.dangerdealnum,
                        dangerdealrates: item.dangerdealrates,
                        dangerdealpoints: item.dangerdealpoints
                    })
                    schoolName.push(item.schoolName);
                    schoolResult.push(item.dangerdealpoints);
                    serialList.push(index + 1);
                    
                })
                this.setState({
                    tableData: tableData,
                    searchChartLoading: false,
                    tableLoading: false,
                    alertVisible: false,
                    isSearch: true,
                    startTime: startTime,
                    endTime: endTime,
                    schoolName: schoolName,
                    schoolResult: schoolResult,
                    serialList: serialList,
                    chartAvg: res.data.schooldangerdealpointsavg
                })
            }
        }).catch((e) => {
            if (e.response) {
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                console.info(e.request)
            } else {
                console.info('error', e.message)
            }
            console.info(e.config)
        });
    }

    // 综合积分
    getSchoolComprehensivePointsRank = (educationId, schooltype, startTime, endTime) => {
        getSchoolComprehensivePointsRankApi(educationId, schooltype, startTime, endTime).then((res) => {
            if(res.data.schoolcomprehensivepointsrankList.length != 0){
                let tableData = [];
                let schoolName = [];
                let schoolResult = [];
                let serialList = [];
                res.data.schoolcomprehensivepointsrankList.forEach((item, index) => {
                    tableData.push({
                        key: index + 1,
                        schoolName: item.schoolName,
                        comprehensivepoints: item.comprehensivepoints
                    })
                    schoolName.push(item.schoolName);
                    schoolResult.push(item.comprehensivepoints);
                    serialList.push(index + 1);
                    
                })
                this.setState({
                    tableData: tableData,
                    searchChartLoading: false,
                    tableLoading: false,
                    alertVisible: false,
                    isSearch: true,
                    startTime: startTime,
                    endTime: endTime,
                    schoolName: schoolName,
                    schoolResult: schoolResult,
                    serialList: serialList,
                    chartAvg: res.data.schoolcomprehensivepointsavg
                })
            }
        }).catch((e) => {
            if (e.response) {
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                console.info(e.request)
            } else {
                console.info('error', e.message)
            }
            console.info(e.config)
        });
    }

    



    handleSelectTime = (value, dateString) => {
        if (dateString[0] != '' && dateString[1] != '') {
            this.setState({
                startTime: dateString[0],
                endTime: dateString[1],
            })
        }
    }

    getSchoolLevelByCenterEduId(id){
        getSchoolLevelByCenterEduIdApi(id)
            .then((res) => {
                this.setState({
                    schoolLevel: res.data,
                });
            })
    }


    showDetailDrawer(departmentId){
        this.setState({
            detailExist: true,
            detailVisible: true,
            currentSchoolId: departmentId,
            flag:true
        })
    }

    handleDetailDrawerCancel() {
        this.setState({
            detailVisible: false,
            flag:false,
        })
    }

    handleDetailDrawerClick(){
        this.setState({
            flag:false,
        })
    }
    
    render() {
        let schoolLevelOptions = [];
        schoolLevelOptions.push(<Option value={null} key={-1}>全部</Option>)
        if (this.state.schoolLevel.length != 0) {
            schoolLevelOptions.push(this.state.schoolLevel.map((d, index) =>
                <Option value={d.schoolLevel} key={index}>{d.schoolLevel}</Option>
            ))
        }
        let statisticType = [];
        statisticType.push(statisticTypeList.map((d, index) => 
            <Option value={d.key} key={d.key}>{d.type}</Option>
        ))
        let info;
        if(this.state.isSearch){
            switch(this.state.statisticData){
                case "inspectnum": info = (<Alert
                    message="巡检次数说明"
                    description={"巡检次数=在统计时间范围内，该学校的巡检次数之和"}
                    type="info"
                    showIcon/>)
                break;
                case "inspectrates": info = (<Alert
                    message="巡检完成率说明"
                    description={"巡检完成率=在统计时间范围内，该学校的巡检完成率"}
                    type="info"
                    showIcon/>)
                break;
                case "inspectpoints": info = (<Alert
                    message="巡检积分说明"
                    description={"巡检积分=在统计时间范围内，该学校的巡检积分之和"}
                    type="info"
                    showIcon/>)
                break;
                case "patrolnum": info = (<Alert
                    message="巡更次数说明"
                    description={"巡更次数=在统计时间范围内，该学校的巡更次数之和"}
                    type="info"
                    showIcon/>)
                break;
                case "patrolrates": info = (<Alert
                    message="巡更完成率说明"
                    description={"巡更完成率=在统计时间范围内，该学校的巡更完成率之和"}
                    type="info"
                    showIcon/>)
                break;
                case "patrolpoints": info = (<Alert
                    message="巡更积分说明"
                    description={"巡更积分=在统计时间范围内，该学校的巡更积分之和"}
                    type="info"
                    showIcon/>)
                break;
                case "dangernum": info = (<Alert
                    message="隐患次数说明"
                    description={"隐患次数=在统计时间范围内，该学校发现隐患次数之和"}
                    type="info"
                    showIcon/>)
                break;
                case "dangerdealpoints": info = (<Alert
                    message="隐患积分说明"
                    description={"隐患积分=在统计时间范围内，该学校的隐患积分之和"}
                    type="info"
                    showIcon/>)
                break;
                case "comprehensivepoints": info = (<Alert
                    message="综合积分说明"
                    description={"综合积分=在统计时间范围内，该学校的综合积分之和"}
                    type="info"
                    showIcon/>)
                break;
            }
        }
        

        const { getFieldDecorator, getFieldValue } = this.props.form;
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const columnsSearch = [{
            title: "序号",
            dataIndex: "key",
            key: "key"
        }, {
            title: "区县",
            dataIndex: "schoolName",
            key: "schoolName",
        }, 
        this.state.statisticData == "dangerdealpoints" ? ({
            title:"隐患发现数",
            dataIndex: "dangernum",
            key: "dangernum"
        }) : {}, 
        this.state.statisticData == "dangerdealpoints" ? ({
            title:"隐患处理数",
            dataIndex: "dangerdealnum",
            key: "dangerdealnum"
        }) : {},
        this.state.statisticData == "dangerdealpoints" ? ({
            title:"隐患结案率(%)",
            dataIndex: "dangerdealrates",
            key: "dangerdealrates"
        }) : {}, 
        {
            title: this.state.statisticType,
            dataIndex: this.state.statisticData,
            key: this.state.statisticData,
            // sorter: (a, b) => a.inspectNum - b.inspectNum,
            // sortDirections: ['descend', 'ascend'],

        }, 
        this.state.statisticData == "dangerdealpoints" ? ({
            title: '详情',
            dataIndex: 'action',
            key: 'action',
            render: (text, record) => {
                console.log('==========', record)
                return (
                    <span>
                            <a
                                href="javascript:;"
                                onClick={this.showDetailDrawer.bind(this, record.departmentId)}
                                > 
                                查看详情
                            </a>
                    </span>
                )
            }
        }) : {}]
        let labelCol = {
            sm: { span: 6 },
            xl: { span: 6 },
            xxl: { span: 5 },
        };

        let wrapperCol = {
            sm: { span: 18 },
            xl: { span: 18 },
            xxl: { span: 19 },
        };


        // Excel标题
        let header = [
            {
                title: '序号',
                dataIndex: 'key',
                key: 'key',
            }, {
                title: '学校',
                dataIndex: 'schoolName',
                key: 'schoolName',
            }]
        if(this.state.statisticData == "dangerdealpoints"){
            header.push({
                title:"隐患发现数",
                dataIndex: "dangernum",
                key: "dangernum"
            })
            header.push({
                title:"隐患处理数",
                dataIndex: "dangerdealnum",
                key: "dangerdealnum"
            })
            header.push({
                title:"隐患结案率(%)",
                dataIndex: "dangerdealrates",
                key: "dangerdealrates"
            })
        } else{
            header.push({
                title: this.state.statisticType,
                dataIndex: this.state.statisticData,
                key: this.state.statisticData
            })
        }
            

        return (
            <div style={{ marginBottom: 16 }}>
                <Form style={{
                    padding: '12px',
                    backgroundColor: '#fafafa',
                    borderRadius: 8,
                    marginBottom: 16,
                }}
                    layout="inline"
                    onSubmit={this.searchSubmit}>
                    <Row>
                        <Col span={8}>
                            <FormItem
                                label="截止日期"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("deadline", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }],
                                    initialValue: [ // 核心代码
                                        moment(this.getBeforeWeekTime(), dateFormat),
                                        moment(this.getBeforeDayTime(), dateFormat),
                                      ],
                          
                                })(
                                    <RangePicker
                                        style={{ width: '100%' }}
                                        format={dateFormat}
                                        onChange={this.handleSelectTime} />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                label="学校类型"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("schoolLevel", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请选择学校类型">
                                        {schoolLevelOptions}
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                        <FormItem
                                label="统计类型"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("statisticType", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请选择统计类型">
                                        {statisticType}
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                        <Col>
                            <FormItem
                                style={{ float: 'right' }}>
                                <Button type="primary" htmlType="submit">搜索</Button>
                                <Button style={{ marginLeft: 8 }} onClick={this.searchReset}>清空</Button>
                                <Button type="primary" style={{ marginLeft: 8 }} onClick={() =>  {
                                    exportExcel(header, this.state.tableData, this.state.statisticType+"排名.xlsx")
                                    }}>导出Excel
                                </Button>  
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <div>
                    {
                        this.state.isSearch ?
                            (
                                <div style={{
                                    marginBottom: 16,
                                    padding: 16,
                                    width: '100%',
                                    height: 350,
                                    border: '1px solid',
                                    borderColor: '#f5f5f5'
                                }}>
                                    <Skeleton loading={this.state.searchChartLoading} active>
                                        <SchoolStatisticChart
                                            that={this}
                                            schoolName={this.state.schoolName}
                                            schoolResult={this.state.schoolResult}
                                            serialList={this.state.serialList}
                                            chartAvg={this.state.chartAvg}
                                            divId={'SchoolStatisticChart'}
                                            statisticType={this.state.statisticType}
                                            statisticData={this.state.statisticData} />
                                    </Skeleton>
                                </div>
                            ) : null
                    }
                    {info}
                    <Table
                        dataSource={this.state.tableData}
                        columns={columnsSearch}
                        loading={this.state.tableLoading}
                        locale={{ emptyText: '暂无数据' }}
                        onChange={this.handleChange2}
                        rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"} />
                        {
                    this.state.detailExist ? (
                        <DangerConditionDetail
                            visible={this.state.detailVisible}
                            currentSchoolId={this.state.currentSchoolId}
                            startTime={this.state.startTime}
                            endTime={this.state.endTime}
                            that={this}
                            flag={this.state.flag} />
                    ) : null
                }
                </div>
            </div>
        );
    }
}

const SchoolStatistic = Form.create()(schoolStatistic);


class SchoolStatisticChart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            schoolResult: props.schoolResult || [],
            schoolName: props.schoolName || [],
            serialList: props.serialList || [],
            chartAvg: props.chartAvg || [],
            that: props.that,
            currentIndex: 0,
            divId: props.divId,
            statisticType: props.statisticType || "",
            statisticData: props.statisticData || ""
        };

    }

    componentWillReceiveProps(props) {
        if (props.schoolResult.length > 0) {
            this.setState({
                that: props.that,
                schoolResult: props.schoolResult,
                schoolName: props.schoolName,
                serialList: props.serialList,
                chartAvg: props.chartAvg,
                statisticType: props.statisticType,
                statisticData: props.statisticData
            }, () => {
                this.drawChart()
            })
        }
    }

    componentDidMount() {
        let optionData = [];
        if (this.state.schoolName.length != 0) {
            this.drawChart();
        }
    }




    drawChart() {


      var chart = echarts.init(document.getElementById('SchoolStatisticChart'));

      let option = {

            baseOption: {
                timeline: {
                    show: false,
                },
                  title: {
                    text: this.state.statisticType + '排名',
                    left: 'center',
                    top: '10px',
                    subtext:'平均值: ' + this.state.chartAvg,
                    subtextStyle: {
                        fontSize: 16
                    }
                },
                legend: [
                    {
                        left:'5%',
                        padding: 5,
                        data: [{name:this.state.statisticType}]
                    }
                ],
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '50px',
                    top: '90px',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: 16
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                fontSize: 16
                            }
                        }
                    }
                ],

                series: [
                    { name: this.state.statisticType,  type: 'bar'},

                ],

            },
           
            options: []        
        };
        option.options.push({
            xAxis: {
                data: this.state.schoolName
                
            },
            series: [
                {
                    name: this.state.statisticType,
                    type: 'bar',
                    data: this.state.schoolResult,
                    barGap: '100%',
                    barMaxWidth: 25,
                    animation: false,
                    itemStyle:
                        {
                            normal: {
                                color: 'rgb(51, 152, 219)',
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'black',
                                        fontSize: 14
                                    }
                                }
                            }
                        },
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    },
        
                    markPoint: {
                        data: [
                            {
                                type: 'max', name: '最大值'
                            }, {
                                type: 'min', name: '最小值'
                            }
                        ]
                    }
                }
            ]
        })
        chart.setOption(option);
       
        
    }


    render() {
        let chartStyle = {
            height: '100%',
            width: '100%',
        };
        return (<div id={this.state.divId} style={chartStyle} />)
    }
}


//安全隐患排名查看详情划窗
class dangerConditionDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: props.visible,
            that: props.that,
            currentSchoolId: props.currentSchoolId,
            startTime:props.startTime,
            endTime:props.endTime,
            flag:props.flag,
            updateVisible: false,
            detailVisible: false,
            alertVisible: false, //提示
            confirmLoading: false,
            previewVisible: false,
            previewImage: '',
            msg: "", //提交失败时的提示语
            tableLoading: true,
            data: [],
            filteredInfo: null,
            sortedInfo: null,
            // searchTextAddress: '',
            // searchTextReporter: '',
           
            allCategory: [],
            allStatus: [],
            isSearch: false,
            realNameArr: [], //上报人的autocomplete数据
            existCategory: [],
            searchData: [],
            test:true,
            searchChartLoading: true,
            chartSafetySceneSearchData: {}
        };
        //console.log('currentInspectPlanIds', props.currentInspectPlanIds)
    }

    componentDidMount() {
        this.refreshData(this.props.currentSchoolId);
    }

    componentWillReceiveProps(props) {
        this.setState({
            currentSchoolId: props.currentSchoolId,
            visible: props.visible,
            that: props.that,
            startTime:props.startTime,
            endTime:props.endTime,
        });
        if (props.visible && props.flag) {

            if(this.state.currentSchoolId != props.currentSchoolId) {
                this.refreshData(props.currentSchoolId);
            }
            
            
        }
    }
  
 

    refreshData(currentSchoolId) {
        this.setState({
            confirmLoading: true,
            tableLoading: true
        })
        
        let columnData = [];
        let statusData = [];
        let values = {
            address: undefined,
            categoryId: undefined, 
            safetyLevel: undefined,
            name: undefined,
            status: undefined,
            reportStartDate: moment(this.state.startTime).format('YYYY-MM-DD'),
            reportEndDate: moment(this.state.endTime).format('YYYY-MM-DD'),
            dealStartDate: undefined,
            dealEndDate: undefined,
            dealName: undefined
        }

        getSafetySceneSearchApi(currentSchoolId, values)
                    .then((res) => {
                        res.data.forEach((item, index) => {
                            columnData.push({
                                key: index + 1,
                                id: item.id,
                                safetyLevel: item.safetyLevel,
                                address: item.address,
                                reporterId: item.reporter,
                                reporterName: item.reportName,
                                status: item.statusString,
                                createTime: item.createTime,
                                modifyTime: item.modifyTime,
                                categoryId: item.categoryId,
                                categoryName: item.categoryName,
                                dealName: item.dealName
                            });
                            statusData.push(item.statusString);
                        });

                        this.setState({
                            columnData: columnData,
                            tableLoading: false,
                            preData: columnData
                        });
                        
                        let statusDataUnique = statusData.filter(function (element, index, array) {
                            return array.indexOf(element) === index;
                        });
                        let allStatus = statusDataUnique.map((d, index) => {
                            return ({
                                text: d,
                                value: d,
                            })
                        })
                        this.setState({
                            allStatus: allStatus,
                        });
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });



        allInspectItemCategory(currentSchoolId, 4)
            .then((res) => {
                //console.log(res.data);
                let categories = [];
                res.data.forEach((item, index) => {
                    let temp = {
                        text: item.category,
                        value: item.category,
                    }
                    categories.push(temp);
                });
                this.setState({
                    allCategory: categories,
                })
            }).catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

        getExistCategoryBySchoolIdAip(currentSchoolId)
            .then((res) => {
                this.setState({
                    existCategory: res.data,
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

        allUserApi(4, currentSchoolId)
            .then((res) => {
                let realNameArr = [];
                res.data.forEach((item, index) => {
                    //console.log("getAllUser", item);
                    realNameArr.push(item.realName);
                });
                this.setState({
                    realNameArr: realNameArr
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            }); 
    }


    formatTime(date) {
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hour = date.getHours();
        const minute = date.getMinutes();
        const second = date.getSeconds();
        return [year, month, day].map(this.formatNumber).join('-') + ' ' + [hour, minute, second].map(this.formatNumber).join(':');
    }

    formatNumber(n) {
        n = n.toString();
        return n[1] ? n : '0' + n;
    }


    showDetailModal(id, safetyLevel, address, reporterName, status,
        createTime, modifyTime, categoryName) {
        let level = "";
        switch (safetyLevel) {
            case 1: level = "安全"; break;
            case 2: level = "一般"; break;
            case 3: level = "危险"; break;
            case 4: level = "非常危险"; break;
            case 5: level = "巡检排查"; break;
        }
        this.setState({
            detailVisible: true,
            currentId: id,
            currentSafetyLevel: level,
            currentAddress: address,
            currentReporterName: reporterName,
            currentStatus: status,
            currentCreateTime: createTime,
            currentModifyTime: modifyTime,
            currentCategoryName: categoryName,
        })
    }

    //关闭 alert 的提示
    handleClose() {
        this.setState({ alertVisible: false });
    }
    //关闭模态框
    handleUpdateCancel() {
        let val = this.refs.updateSafetysceneFormValue;
        val.resetFields();
        this.setState({
            alertVisible: false,
            updateVisible: false,
        });
    }
    //关闭模态框
    handleDetailCancel() {
        this.setState({
            alertVisible: false,
            detailVisible: false,
        });
    }

    clearAll = () => {
        this.setState({
            filteredInfo: null,
            sortedInfo: null,
        });

    }

    handleChange = (pagination, filters, sorter) => {
        //console.log('Various parameters', pagination, filters, sorter);
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }

    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
        // this.setState({
        //     searchTextAddress: selectedKeys[0],
        //     searchTextReporter: selectedKeys[0]
        // });
    }

    handleSearchReset = clearFilters => () => {
        clearFilters();
        // this.setState({
        //     searchTextAddress: '',
        //     searchTextReporter: '',
        // });
    }

    getBeforeDayTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000;
        var beforeday = new Date(time); // 获取的是前一天日期

        beforeday = beforeday.getFullYear() + "-" + (beforeday.getMonth() + 1 > 9
            ? (beforeday.getMonth() + 1) : "0" + (beforeday.getMonth()+1)) + "-" + (beforeday.getDate() > 9
                ? (beforeday.getDate()) : "0" + (beforeday.getDate())); //字符串拼接转格式：例如2018-08-19
        
        return beforeday
    }
    getBeforeWeekTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000 * 7;
        var beforeweek = new Date(time); // 获取的是前一周日期

        beforeweek = beforeweek.getFullYear() + "-" + (beforeweek.getMonth() + 1 > 9
            ? (beforeweek.getMonth() + 1) : "0" + (beforeweek.getMonth() + 1)) + "-" + (beforeweek.getDate() > 9
                ? (beforeweek.getDate()) : "0" + (beforeweek.getDate())); //字符串拼接转格式：例如2018-08-19
        return beforeweek
    }

    searchSubmit = (e) => {

        console.log('===========1')
    
        e.preventDefault();
       
        this.props.form.validateFields((err, values) => {
            
           
            console.log('Received values of form: ', values);
            if (values.address == undefined && values.categoryId == undefined && values.safetyLevel == undefined
                && values.reporterName == undefined && values.status == undefined && values.createTime == undefined
                && values.modifyTime == undefined && values.dealName == undefined) {
                message.error('请至少填写一项条件再进行搜索');
             
            } else {
                this.setState({
                    tableLoading: true,
                    isSearch: true,
                    
                    
                });
              
                if (values.categoryId !== undefined && values.categoryId.length == 0) {
                    values.categoryId = undefined;
                }

                if (values.safetyLevel !== undefined && values.safetyLevel.length == 0) {
                    values.safetyLevel = undefined;
                }

                if (values.createTime == undefined || values.createTime.length == 0) {
                    values.reportStartDate = undefined;
                    values.reportEndDate = undefined;
                } else {
                    values.reportStartDate = moment(values.createTime[0]).format('YYYY-MM-DD');
                    values.reportEndDate = moment(values.createTime[1]).format('YYYY-MM-DD');
                }

                if (values.modifyTime == undefined || values.modifyTime.length == 0) {
                    values.dealStartDate = undefined;
                    values.dealEndDate = undefined;
                } else {
                    values.dealStartDate = moment(values.modifyTime[0]).format('YYYY-MM-DD');
                    values.dealEndDate = moment(values.modifyTime[1]).format('YYYY-MM-DD');
                }

                let columnData = [];
                let statusData = [];
                getSafetySceneSearchApi(this.state.currentSchoolId, values)
                    .then((res) => {
                        res.data.forEach((item, index) => {
                            columnData.push({
                                key: index + 1,
                                id: item.id,
                                safetyLevel: item.safetyLevel,
                                address: item.address,
                                reporterId: item.reporter,
                                reporterName: item.reportName,
                                status: item.statusString,
                                createTime: item.createTime,
                                modifyTime: item.modifyTime,
                                categoryId: item.categoryId,
                                categoryName: item.categoryName,
                                dealName: item.dealName
                            });
                            statusData.push(item.statusString);
                        });

                        this.setState({
                            columnData: columnData,
                            tableLoading: false
                        });
                        let statusDataUnique = statusData.filter(function (element, index, array) {
                            return array.indexOf(element) === index;
                        });
                        let allStatus = statusDataUnique.map((d, index) => {
                            return ({
                                text: d,
                                value: d,
                            })
                        })
                        this.setState({
                            allStatus: allStatus,
                        });
                     
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });

                getSafetySceneSearchChartDataApi(this.state.currentSchoolId, values)
                    .then(res => {
                        console.log(res.data)
                        this.setState({
                            searchChartLoading: false,
                            chartSafetySceneSearchData: res.data,
                            alertVisible: false,
                        });
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // ��node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });
            }
        });
    }

    searchReset = () => {
        this.props.form.resetFields();
        this.setState({
            isSearch: false,
            columnData: this.state.preData,
        })
    }

    setFullScreen(opts) {
        this.setState({
            fullScreenVisible: true,
        })
        let fullchart = echarts.init(document.getElementById('fullScreen'))
        fullchart.setOption(opts);
    }

    fullScreenCancel() {
        this.setState({
            fullScreenVisible: false,
        })
    }

    render() {
        
        const Panel = Collapse.Panel;
        const gridStyle = {
            width: '33.33333333333333333333333%',
            height: '150px',
            textAlign: 'center',
            position: 'relative'
        };

        const { getFieldDecorator, getFieldValue } = this.props.form;
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};

        let keyWidth = undefined;
        let categoryNameWidth = undefined;
        let reporterNameWidth = undefined;
        let statusWidth = undefined;
        let actionWidth = undefined;
        let timeWidth = undefined;

        let winWidth;
        // 获取窗口宽度
        if (window.innerWidth)
            winWidth = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
            winWidth = document.body.clientWidth;
        if (winWidth < 1500) {
            keyWidth = 60;
            categoryNameWidth = 110;
            reporterNameWidth = 90;
            statusWidth = 80;
            actionWidth = 110;
            timeWidth = 120;
        }

        const columns = [{
            title: "序号",
            dataIndex: "key",
            key: "key",
            width: keyWidth,
        }, {
            title: "地址",
            dataIndex: "address",
            key: "address",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.address.toLowerCase().includes(value.toLowerCase()),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            }
        }, {
            title: "项目类别",
            dataIndex: "categoryName",
            key: "categoryName",
            width: categoryNameWidth,
            filters: this.state.allCategory,
            filteredValue: filteredInfo.categoryName || null,
            onFilter: (value, record) => record.categoryName.includes(value),
            filterIcon: filtered =>
                <Icon
                    type="filter"
                    style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
        }, {
            title: "安全等级",
            dataIndex: "safetyLevel",
            key: "safetyLevel",
            sorter: (a, b) => a.safetyLevel - b.safetyLevel,
            sortOrder: sortedInfo.columnKey === 'safetyLevel' && sortedInfo.order,
            render: (text) => (
                <div style={{ width: '90px' }}>
                    <img
                        style={{ width: '100%' }}
                        src={require('../img/safetyLevel' + text + '.png')} />
                </div>
            )
        }, {
            title: "上报人",
            dataIndex: "reporterName",
            key: "reporterName",
            width: reporterNameWidth,
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.reporterName.toLowerCase().includes(value.toLowerCase()),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            }
        }, {
            title: "状态",
            dataIndex: "status",
            key: "status",
            width: statusWidth,
            filters: this.state.allStatus,
            filteredValue: filteredInfo.status || null,
            onFilter: (value, record) => record.status.includes(value),
            filterIcon: filtered => <Icon type="filter" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            render: (text) => {
                if (text == '已处理') { return (<span style={{ color: 'green' }}>已处理</span>) }
                else if (text == '未处理') { return (<span style={{ color: 'red' }}>未处理</span>) }
                else if (text == '处理中') { return (<span style={{ color: '#096dd9' }}>处理中</span>) }
            },
        }, {
            title: "上报时间",
            dataIndex: "createTime",
            key: "createTime",
            width: timeWidth,
            sorter: (a, b) => new Date(a.createTime).getTime() - new Date(b.createTime).getTime(),
            sortOrder: sortedInfo.columnKey === 'createTime' && sortedInfo.order,
        }, {
            title: "处理时间",
            dataIndex: "modifyTime",
            key: "modifyTime",
            width: timeWidth,
            sorter: (a, b) => new Date(a.modifyTime).getTime() - new Date(b.modifyTime).getTime(),
            sortOrder: sortedInfo.columnKey === 'modifyTime' && sortedInfo.order,
            render: (text, record) => {
                if (record.status == '已处理') { return (<span>{text}</span>) }
                else if (record.status == '未处理') { return (<span>-</span>) }
            },
        }, {
            title: "处理人",
            dataIndex: "dealName",
            key: "dealName",
            width: reporterNameWidth,
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.reporterName.toLowerCase().includes(value.toLowerCase()),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            },
            render: (text, record) => {
                if (record.status == '未处理') { return (<span>-</span>) }
                else {
                    return (<span>{text}</span>)
                }
            }
        }, {
            title: "操作详情",
            key: "action",
            width: actionWidth,
            render: (text, record) => {
                    return (
                        <span>
                            <a href="javascript:;" onClick={this.showDetailModal.bind(this,
                                record.id, record.safetyLevel, record.address,
                                record.reporterName, record.status, record.createTime,
                                record.modifyTime, record.categoryName)}>详细</a>
                        </span>
                    )
            }
        }];

        let categoryOptions;
        if (this.state.existCategory.length != 0) {
            categoryOptions = this.state.existCategory.map((d, index) =>
                <Option value={d.id} key={index}>{d.category}</Option>
            );
        }

        let statusOptions;
        if (this.state.allStatus.length != 0) {
            statusOptions = this.state.allStatus.map((d, index) =>
                <Option value={d.value} key={index}>{d.value}</Option>
            );
        }

        let labelCol = {
            sm: { span: 6 },
            xl: { span: 6 },
            xxl: { span: 5 },
        };

        let wrapperCol = {
            sm: { span: 18 },
            xl: { span: 18 },
            xxl: { span: 19 },
        };

        return (
            <div>
                <Drawer
                    bodyStyle={{ paddingBottom: 80 }}
                    width={0.85*window.screen.width}
                    title='安全隐患详情'
                    visible={this.state.visible}
                    onClose={this.state.that.handleDetailDrawerCancel.bind(this.state.that)}
                    destroyOnClose={true}
                    closable
                >

                <div style={{ marginBottom: 16 }}>
                <Form
                    style={{
                        padding: '12px',
                        backgroundColor: '#fafafa',
                        borderRadius: 8,
                        marginBottom: 16
                    }}
                    layout="inline"
                    onSubmit={this.searchSubmit}>
                    <Row>
                        <Col span={8}>
                            <FormItem
                                label="地址"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("address", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Input
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请输入地址"
                                    ></Input>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                label="项目类别"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("categoryId", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        style={{ width: '100%' }}
                                        mode="multiple"
                                        placeholder="请选择项目类别(可多选)">
                                        {categoryOptions}
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                label="安全等级"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("safetyLevel", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        style={{ width: '100%' }}
                                        mode="multiple"
                                        placeholder="请选择安全等级(可多选)">
                                        <Option value={1}>安全</Option>
                                        <Option value={2}>一般</Option>
                                        <Option value={3}>危险</Option>
                                        <Option value={4}>非常危险</Option>
                                        <Option value={5}>巡检排查</Option>
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={8}>
                            <FormItem
                                label="上报人"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("reporterName", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <AutoComplete
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        dataSource={this.state.realNameArr}
                                        placeholder="请输入上报人"
                                        filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
                                    />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                label="上报时间"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("createTime", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }],
                                    initialValue: [ // 核心代码
                                        moment(this.state.startTime, 'YYYY-MM-DD'),
                                        moment(this.state.endTime, 'YYYY-MM-DD'),
                                      ],
                                })(
                                    <RangePicker
                                        style={{ width: '100%' }}
                                        format="YYYY-MM-DD" />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                label="处理时间"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("modifyTime", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }]
                                })(
                                    <RangePicker
                                        style={{ width: '100%' }}
                                        format="YYYY-MM-DD" />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={8}>
                            <FormItem
                                label="处理人"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("dealName", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <AutoComplete
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        dataSource={this.state.realNameArr}
                                        placeholder="请输入处理人"
                                        filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
                                    />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                label="状态"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("status", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请选择状态">
                                        {statusOptions}
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                        <FormItem
                            style={{ float: 'right' }}>
                            <Button type="primary" htmlType="submit" onClick={this.state.that.handleDetailDrawerClick.bind(this.state.that)}>搜索</Button>
                            <Button style={{ marginLeft: 8 }} onClick={this.searchReset}>清空</Button>
                        </FormItem>
                    </Row>
                </Form>
                {this.state.isSearch ? (
                    <div style={{
                        marginBottom: 16,
                        padding: 16,
                        width: '100%',
                        height: 300,
                        border: '1px solid',
                        borderColor: '#f5f5f5'
                    }}>
                        <Skeleton loading={this.state.searchChartLoading} active>
                            <ChartSafetySceneSearch
                                that={this}
                                chartData={this.state.chartSafetySceneSearchData} />
                        </Skeleton>
                    </div>
                ) : null}
                {/* <Button style={{ marginBottom: '20px' }} onClick={this.clearAll}>
                    <Icon type="delete" theme="outlined" />清除筛选与排序</Button> */}
                <Drawer
                    bodyStyle={{ paddingBottom: 80 }}
                    width={600}
                    title={'安全现场详细信息'}
                    visible={this.state.detailVisible}
                    onClose={this.handleDetailCancel.bind(this)}
                    destroyOnClose={true}
                    closable
                >
                    <SafetysceneDetail
                        currentId={this.state.currentId} currentSafetyLevel={this.state.currentSafetyLevel}
                        currentAddress={this.state.currentAddress} currentReporterName={this.state.currentReporterName}
                        currentStatus={this.state.currentStatus} currentCreateTime={this.state.currentCreateTime}
                        currentModifyTime={this.state.currentModifyTime} currentCategoryName={this.state.currentCategoryName} />
                    {
                        this.state.alertVisible ?
                            (
                                <Alert message={this.state.msg} type="error" closable afterClose={this.handleClose.bind(this)} />
                            ) : null
                    }
                    <div
                        style={{
                            position: 'absolute',
                            left: 0,
                            bottom: 0,
                            width: '100%',
                            borderTop: '1px solid #e9e9e9',
                            padding: '10px 16px',
                            background: '#fff',
                            textAlign: 'right',
                        }}
                    >
                        <Button key="submit" type="primary" size="large" 
                            onClick={this.handleDetailCancel.bind(this)}>关闭</Button>
                    </div>
                </Drawer>

                <Table
                    dataSource={this.state.columnData}
                    columns={columns}
                    loading={this.state.tableLoading}
                    locale={{ emptyText: '暂无数据' }}
                    rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                    onChange={this.handleChange}
                    pagination={{  //分页
                        total: this.state.data.length, //数据总数量
                        defaultPageSize: 10, //默认显示几条一页
                        //pageSize: 10,
                        showTotal: function (total) {  //设置显示一共几条数据
                            return '共 ' + total + ' 条数据';
                        },
                        showSizeChanger: true,
                        showQuickJumper: true,
                        pageSizeOptions: [5, 10, 20, 30]
                    }} />

                <Modal
                    destroyOnClose
                    visible={this.state.fullScreenVisible}
                    title={'每日隐患上报/处理情况展示图'}
                    footer={null}
                    width={1000}
                    bodyStyle={{
                        padding: 24,
                        height: 600
                    }}
                    onCancel={() => { this.fullScreenCancel() }}>
                    <div id='fullScreen'
                        style={{
                            width: '100%',
                            height: '100%',
                        }} />

                </Modal>
                </div>
                    
                    <div
                        style={{
                            position: 'absolute',
                            left: 0,
                            bottom: 0,
                            width: '100%',
                            borderTop: '1px solid #e9e9e9',
                            padding: '10px 16px',
                            background: '#fff',
                            textAlign: 'right',
                        }}
                    >
                        <Button size="large" onClick={this.state.that.handleDetailDrawerCancel.bind(this.state.that)}
                            style={{ marginRight: 20 }}>关闭</Button>
                    </div>
                </Drawer>
                
            </div>

        );
    }
}
const DangerConditionDetail = Form.create()(dangerConditionDetail);

class ChartSafetySceneSearch extends Component {
    constructor(props) {
        super(props);

        this.state = {
            chartData: props.chartData,
            that: props.that,
        };
    }

    componentWillReceiveProps(props) {
        if (JSON.stringify(props.chartData) !== JSON.stringify(this.state.chartData)) {
            this.setState({
                chartData: props.chartData,
                that: props.that,
            }, () => {
                this.drawChart();
            })
        }
    }

    componentDidMount() {
        this.drawChart();
    }

    drawChart() {
        if (JSON.stringify(this.state.chartData) != '{}') {
            // console.log(this.state.chartData);
            let chart = echarts.init(document.getElementById('chartSafetySceneSearch'));

            let dataZoom;
            if (this.state.chartData.date.length <= 30) {
                dataZoom = [{
                    type: 'inside',
                    start: 0,
                    end: 100
                }, {
                    start: 0,
                    end: 100,
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '80%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }];
            } else {
                dataZoom = [{
                    type: 'inside',
                    start: (this.state.chartData.date.length - 30) / this.state.chartData.date.length * 100,
                    end: 100,
                }, {
                    start: (this.state.chartData.date.length - 30) / this.state.chartData.date.length * 100,
                    end: 100,
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '80%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }];
            }


            chart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['上报数', '处理数']
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '40px',
                    top: '30px',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: { show: true, },
                        // restore: { show: true },
                        // dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        myFullScreen: {
                            show: true,
                            title: '全屏查看',
                            icon: 'path://M160.762 757.972l210.611-210.61 105.66 105.659-210.644 210.643L362.667 960H64V661.15l96.762 96.822zM266.39 160.336L477.032 370.98 371.373 476.64l-210.61-210.61L64 362.848V64h298.667l-96.278 96.336z m491.222 703.328L546.968 653.02l105.659-105.66 210.61 210.61L960 661.152V960H661.333l96.278-96.336z m105.627-597.636l-210.611 210.61-105.66-105.659 210.644-210.643L661.333 64H960v298.85l-96.762-96.822z',
                            onclick: (e) => {
                                var opts = e.getOption()
                                opts.toolbox[0].feature.myFullScreen.show = false;
                                console.log(this.state)
                                this.state.that.setFullScreen(opts);

                            }
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.state.chartData.date,
                    axisTick: {
                        alignWithLabel: true
                    },
                },
                yAxis: {
                    name: '数量',
                    type: 'value'
                },
                dataZoom: dataZoom,
                series: [{
                    name: '上报数',
                    type: 'line',
                    data: this.state.chartData.reportNum,
                    smooth: true,
                    symbol: 'none',
                    sampling: 'average',
                }, {
                    name: '处理数',
                    type: 'line',
                    data: this.state.chartData.dealNum,
                    smooth: true,
                    symbol: 'none',
                    sampling: 'average',
                }]

            });
            window.onresize = chart.resize;
        }

    }

    render() {
        let chartStyle = {
            height: '100%',
            width: '100%',
        };
        return (<div id='chartSafetySceneSearch' style={chartStyle} />)
    }
}

class SafetysceneDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentId: props.currentId,
            currentSafetyLevel: props.currentSafetyLevel,
            currentAddress: props.currentAddress,
            currentReporterName: props.currentReporterName,
            currentStatus: props.currentStatus,
            currentCreateTime: props.currentCreateTime,
            currentModifyTime: props.currentModifyTime,
            currentCategoryName: props.currentCategoryName,

            currentContent: '',
            currentPhoto: [],
            currentVideo: '',
            currentPhotoStr: '',
            currentDealContent: '',
            currentDealPhoto: [],
            currentDealVideo: '',
            currentDealPhotoStr: '',
            currentDealUserName: '',
            currentEvaluate: 0,

            previewVisible: false,
            previewImage: '',
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() {
        //console.log(this.state);
        safetysceneDetailByIdApi(this.state.currentId)
            .then((res) => {
                //console.log(res);
                if (this.state.currentStatus == '已处理') {
                    this.setState({
                        currentContent: res.data.content,
                        currentPhoto: res.data.photoList,
                        currentVideo: res.data.video,
                        currentDealContent: res.data.dealContent,
                        currentDealPhoto: res.data.dealPhotoList,
                        currentDealVideo: res.data.dealVideo,
                        currentDealUserName: res.data.realName,
                        currentEvaluate: res.data.evaluate,
                        currentPhotoStr: res.data.photo,
                        currentDealPhotoStr: res.data.dealPhoto
                    });
                } else if (this.state.currentStatus == '未处理') {
                    this.setState({
                        currentContent: res.data.content,
                        currentPhoto: res.data.photoList,
                        currentVideo: res.data.video,
                        currentPhotoStr: res.data.photo,
                    });
                } else if (this.state.currentStatus == '处理中') {
                    this.setState({
                        currentContent: res.data.content,
                        currentPhoto: res.data.photoList,
                        // currentDealContent: res.data.dealContent,
                        // currentDealPhoto: res.data.dealPhotoList,
                        currentDealUserName: res.data.realName,

                        currentPhotoStr: res.data.photo,
                        currentDealPhotoStr: res.data.dealPhoto
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }


    handlePreview = (src) => {
        this.setState({
            previewImage: src,
            previewVisible: true,
        });
    }
    //查看video
    handlePreview2 = (src) => {

    }

    handleCancel = () => this.setState({ previewVisible: false })

    render() {
        const gridStyle = {
            width: '33.33333333333333333333333%',
            height: '150px',
            textAlign: 'center',
            padding: '10px',
            position: 'relative'
        };

        let prePhotos;
        let preVideo;
        if (this.state.currentPhotoStr == '') {
            prePhotos = (
                <Card.Grid
                    key={0}
                    style={gridStyle}>
                    <img
                        style={{
                            width: 'auto',
                            height: 'auto',
                            position: 'absolute',
                            top: 0,
                            left: 0,
                            right: 0,
                            bottom: 0,
                            margin: 'auto',
                            maxWidth: '100%',
                            maxHeight: '100%',
                            padding: 5,
                        }}
                        alt="上报照片"
                        src={require('../img/nophoto.png')} />
                </Card.Grid>
            );
        } else {
            prePhotos = this.state.currentPhoto.map((d, index) =>
                <Card.Grid
                    key={index}
                    style={gridStyle}>
                        {/* <RViewerJS> */}
                        <img
                        style={{
                            width: 'auto',
                            height: 'auto',
                            position: 'absolute',
                            top: 0,
                            left: 0,
                            right: 0,
                            bottom: 0,
                            margin: 'auto',
                            maxWidth: '100%',
                            maxHeight: '100%',
                            padding: 5,
                        }}
                        alt="上报照片"
                        src={UrlPrefix + d}
                         />
                        {/* </RViewerJS> */}
                   
                </Card.Grid>
            );
        }
        preVideo = (
            <Card.Grid
                key={0}
                style={gridStyle}>
                <video
                    style={{
                        width: 'auto',
                        height: 'auto',
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0,
                        margin: 'auto',
                        maxWidth: '100%',
                        maxHeight: '100%',
                        padding: 5,
                    }}
                    src={UrlPrefix + this.state.currentVideo} controls />
            </Card.Grid>
        );
        let preData = [{
            title: '上报地址',
            description: this.state.currentAddress,
        }, {
            title: '上报类别',
            description: this.state.currentCategoryName,
        }, {
            title: '安全等级',
            description: this.state.currentSafetyLevel,
        }, {
            title: '上报人',
            description: this.state.currentReporterName,
        }, {
            title: '状态',
            description: this.state.currentStatus,
        }, {
            title: '上报时间',
            description: this.state.currentCreateTime,
        }, {
            title: '上报内容',
            description: this.state.currentContent,
        }, {
            title: '上报照片',
            description: (
                <Card
                    hoverable
                    style={{ marginTop: '10px' }}>
                        <RViewerJS>
                    {prePhotos}
                    </RViewerJS>
                </Card>),
        }, {
            title: '上报视频',
            description: (
                this.state.currentVideo == "" ?
                    <span>暂无视频</span>
                    :
                    <Card
                        hoverable
                        style={{ marginTop: '10px' }}>
                            <RViewerJS>
                        {preVideo}
                        </RViewerJS>
                    </Card>
            ),
        }];

        let dealData;
        if (this.state.currentStatus == '已处理' || this.state.currentStatus == '处理中') {
            let dealPhotos;
            if (this.state.currentDealPhotoStr == '') {
                dealPhotos = (
                    <Card.Grid
                        key={0}
                        style={gridStyle}>
                        <img
                            style={{
                                width: 'auto',
                                height: 'auto',
                                position: 'absolute',
                                top: 0,
                                left: 0,
                                right: 0,
                                bottom: 0,
                                margin: 'auto',
                                maxWidth: '100%',
                                maxHeight: '100%',
                                padding: 5,
                            }}
                            alt="暂无图片"
                            src={require('../img/nophoto.png')} />
                    </Card.Grid>
                );
            } else {
                dealPhotos = this.state.currentDealPhoto.map((d, index) =>
                    <Card.Grid
                        key={index}
                        style={gridStyle}>
                            {/* <RViewerJS> */}
                            <img
                            style={{
                                width: 'auto',
                                height: 'auto',
                                position: 'absolute',
                                top: 0,
                                left: 0,
                                right: 0,
                                bottom: 0,
                                margin: 'auto',
                                maxWidth: '100%',
                                maxHeight: '100%',
                                padding: 5,
                            }}
                            alt="上报照片"
                            src={UrlPrefix + d}
                             />
                            {/* </RViewerJS> */}
                       
                    </Card.Grid>
                );
            }
            let dealVideo = (
                <Card.Grid
                    key={0}
                    style={gridStyle}>
                    <video
                        style={{
                            width: 'auto',
                            height: 'auto',
                            position: 'absolute',
                            margin: 'auto',
                            top: 0,
                            left: 0,
                            right: 0,
                            bottom: 0,
                            maxWidth: '100%',
                            maxHeight: '100%',
                            padding: 5,
                        }}
                        src={UrlPrefix + this.state.currentDealVideo} controls />
                </Card.Grid>
            );
            dealData = [{
                title: '处理时间',
                description: this.state.currentModifyTime,
            }, {
                title: '处理人员',
                description: this.state.currentDealUserName,
            }, {
                title: '处理内容',
                description: this.state.currentDealContent,
            }, {
                title: '处理照片',
                description: (
                    <Card
                        hoverable
                        style={{ marginTop: '10px' }}>
                            <RViewerJS>
                        {dealPhotos}
                        </RViewerJS>
                    </Card>),
            }, {
                title: '处理视频',
                description: (
                    this.state.currentDealVideo == "" ?
                        <span>暂无视频</span>
                        :
                        <Card
                            hoverable
                            style={{ marginTop: '10px' }}>
                                <RViewerJS>
                            {dealVideo}
                            </RViewerJS>
                        </Card>
                ),
            }]

            if (this.state.currentStatus === '已处理') {
                dealData.push({
                    title: '评价情况',
                    description: (
                        this.state.currentEvaluate === 0 ?
                            <span>暂未评价</span>
                            :
                            <Rate disabled defaultValue={this.state.currentEvaluate} />
                    )
                })
            }
        } else if (this.state.currentStatus == '未处理') {
            dealData = [{
                title: '此条暂未处理',
            }]
        }


        return (
            <div>
                <Tabs
                    defaultActiveKey="1">
                    <TabPane tab={<span ><IconFont type="icon-weiwancheng" className='iconTabs' />上报信息</span>} key="1">
                        <List
                            itemLayout="horizontal"
                            dataSource={preData}
                            renderItem={item => (
                                <List.Item>
                                    <List.Item.Meta
                                        title={item.title}
                                        description={item.description}
                                    />
                                </List.Item>
                            )}
                        />
                    </TabPane>
                    <TabPane tab={<span><IconFont type="icon-yiwanchengdingdan" className='iconTabs' />处理信息</span>} key="2">
                        <List
                            itemLayout="horizontal"
                            dataSource={dealData}
                            renderItem={item => (
                                <List.Item>
                                    <List.Item.Meta
                                        title={item.title}
                                        description={item.description}
                                    />
                                </List.Item>
                            )}
                        />
                    </TabPane>
                </Tabs>
                <Modal
                    destroyOnClose
                    visible={this.state.previewVisible}
                    footer={null}
                    bodyStyle={{
                        paddingTop: 48,
                    }}
                    onCancel={this.handleCancel}>
                    <img
                        alt="安全现场上报与处理照片"
                        style={{ width: '100%' }}
                        src={this.state.previewImage} />
                </Modal>
            </div>

        );
    }
}

export { SchoolStatistic }